<template>
  <div class="app-container">
    <h3>用户关系</h3>
    <!-- <el-empty v-if="!users || users.length < 1" description="暂无数据" /> -->
    <el-tree
      :props="defaultProps"
      :load="loadNode"
      lazy
    ></el-tree>
  </div>
</template>

<script>
import { getRootUsers, getSubUsers } from '@/api/agentUser'
export default {
  name: 'AgentUsers',
  data() {
    return {
      // users: [],
      defaultProps: {
        children: 'children',
        label: this.getLabel,
        isLeaf: 'leaf'
      }
    }
  },
  created() {
    // this.fetchReferrers()
  },
  methods: {
    getLabel(user) {
      return `${user.name} ------ id:${user.id}`
    },
    loadNode(node, resolve) {
      console.log('node :>> ', node)
      if (node.level === 0) {
        getRootUsers().then((res) => {
          return resolve(res.data)
        })
      } else {
        const userId = node.data.id
        getSubUsers(userId).then(res => {
          return resolve(res.data)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
